<template>
  <div class="reviseinfo">
    <van-form @submit="onSubmit">
      <van-uploader :after-read="afterRead" show-upload>
        <div class="avatar">
          <img :src="userInfo.avatar" alt="用户头像" ref="goodsImg" />
        </div>
      </van-uploader>
      <van-field
        v-model="nickname"
        name="nickname"
        label="用户名"
        placeholder="用户名留空则不修改"
      />
      <van-field
        v-model="mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号留空则不修改"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码留空则不修改"
      />
      <div style="margin: 16px">
        <van-button round block type="info" color="#ff6a6c" native-type="submit"
          >保存</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import API from "@/utils/api.js";
import { Form, Field, Button, Uploader, Toast } from "vant";
export default {
  name: "ReviseInfo",
  data() {
    return {
      //新手机号
      mobile: "",
      //新密码
      password: "",
      //新用户名
      nickname: "",
      userInfo: {},
      file: [],
    };
  },
  created() {
    this.$get(API.GET_AUTO_INFO, {
      token: this.$store.state.token,
    }).then((res) => {
      console.log(res);
      this.userInfo = res.data;
    });
  },
  methods: {
    afterRead(file) {
      console.log(file);
      //将原图片显示为选择的图片
      this.$refs.goodsImg.src = file.content;
      this.file = file.content;
    },
    onSubmit(values) {
      this.$post(API.POST_AUTO_UPDATEINFO, {
        token: this.$store.state.token,
        filePath: this.file,
        password: values.password,
        nickname: values.nickname,
        mobile: values.mobile,
      }).then((res) => {
        this.$router.push("/my");
        Toast.success("信息修改成功");
      });
    },
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    [Toast.name]: Toast,
  },
};
</script>

<style lang="less" scoped>
.reviseinfo {
  margin-top: 46px;
  .avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 20px;
    margin-left:140px;
  }
}
</style>